<template>
    <div id="wendu" style="width:100%;height: 300px;">
    </div>
</template>
<script>
export default {
  data () {
    return {
      "charts": "",
      "option": {
        legend: {
          data: ['生产车间的气温']
        },
        tooltip: {
          trigger: 'axis',
          formatter: "Temperature : <br/>{b}km : {c}°C"
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        yAxis: {
          type: 'category',
          axisLine: {onZero: false},
          axisLabel: {
            formatter: '{value} 车间'
          },
          boundaryGap: false,
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9']
        },
        series: [
          {
            name: '生产车间的气温',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 3,
                shadowColor: 'rgba(0,0,0,0.4)',
                shadowBlur: 10,
                shadowOffsetY: 10
              }
            },
            data: [15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
          }
        ]
      }
    };
  },
  methods: {
    drawPie (id) {
      this.charts = echarts.init(document.getElementById(id), 'dark');
      this.charts.setOption(this.option);
    }
  },
  mounted () {
    this.drawPie('wendu');
  }
};
</script>
<style scoped>
  .perth4{
    line-height: 35px;
  }
  .btm0 div{
    padding-bottom: 0!important;
  }
</style>